<template>
	<div
		class="steps"
	>
		<div class="step">
			<div class="index">①</div>
			<div class="content">
				<div class="left">
					<div class="name">适用玩具</div>
					<div
						class="desc"
						v-for="toy in course.adaptToys"
						:key='toy.name'
					>
						<div class="label">{{toy.name}}</div>
					</div>
				</div>
				<div class="right">
					<div
						style="margin-right: 24px;"
						v-for="toy in course.adaptToys"
						:key='toy.name'
					>
						<Tag
							v-if="toy.img"
							bgColor="#EFF3F3"
							width="195px"
							height="195px"
						>
							<img :src="toy.img">
						</Tag>
					</div>
				</div>
			</div>
		</div>
		<div class="step">
			<div class="index">②</div>
			<div class="content">
				<div class="left">
					<div class="name">玩具尺寸</div>
					<div class="desc">改造区域：</div>
				</div>
				<div class="right">
					<Tag
						bgColor="#EFF3F3"
						width="195px"
						height="195px"
					>
						<dive
							class="size"
							v-html="course.size"
						/>
					</Tag>
				</div>
			</div>
		</div>
		<div class="step">
			<div class="index">③</div>
			<div class="content">
				<div class="left">
					<div class="name">所需材料</div>
				</div>
				<div class="right">
					<div class="materials">
						<div
							class="material"
							v-for="(item,i) in course.materials"
							:key="item.name"
							@click="onclickMaterial(item)"
						>
							<div class="label">{{i+1}}、{{item.name}}</div>
							<Tag
								bgColor="#EFF3F3"
								width="195px"
								height="195px"
							>
								<img
									:style="{
										'cursor': item.clickCb ? 'pointer' : 'default'
									}"
									:src="item.img"
								>
							</Tag>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    course: Object,
  },
  methods: {
    onclickMaterial(item) {
      item.clickCb && item.clickCb()
    }
  }
}
</script>

<style lang='scss' scoped>
.steps {
  .step {
    position: relative;
    padding: 0 0 36px 30px;

    &:not(:last-of-type)::after {
      position: absolute;
      top: 30px;
      left: 10px;
      width: 1px;
      height: calc(100% - 40px);
      content: '';
      border-left: 1px dashed #003e34;
    }

    .index {
      position: absolute;
      left: 0;
    }

    .name,
    .index {
      font-size: $sSmall;
      color: $primary1;
    }

    .name {
      margin-bottom: 20px;
    }

    .content {
      display: flex;

      .left {
        width: 110px;

        .desc {
          display: flex;
          font-size: $sMini;
        }
      }

      .right {
        display: flex;

        .size {
          line-height: 40px;
          color: rgba(0, 62, 52, 0.7);
          white-space: pre-wrap;
        }

        .materials {
          display: flex;

          .material {
            margin-right: 24px;

            .label {
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
